<template>
  <div :style="'height:' + height">
<!--    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">-->
<!--      <div style="padding: 10px 0px; text-align: right;">-->
<!--        <div>-->
<!--          <el-tooltip effect="dark" content="暗模式" placement="bottom">-->
<!--            <el-button size="small" icon="Rank" @click="handleTheme('theme-dark')">暗模式</el-button>-->
<!--          </el-tooltip>-->
<!--          <el-tooltip effect="dark" content="明模式" placement="bottom">-->
<!--            <el-button size="small" icon="Rank" @click="handleTheme('theme-light')">明模式</el-button>-->
<!--          </el-tooltip>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-header>-->
    <iframe id="warmChart" :src="url" style="width: 100%; height: 100%"/>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";

export default {
  name: "WarmFlow",
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + "px;",
      url: ""
    };
  },
  mounted() {
    const baseUrl = `${process.env.VUE_APP_FLOW_API}/warm-flow-ui/index.html?id=${this.$route.params.id}&disabled=${this.$route.query.disabled}`;
    this.url = baseUrl + `&Authorization=Bearer ` + getToken();
    // this.url = baseUrl + `&showGrid=true&Authorization=Bearer ` + getToken();
    window.addEventListener("message", this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener("message", this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      console.log(event.data.method, event);
      switch (event.data.method) {
        case "close":
          this.close();
          break;
      }
    },
    close() {
      // 路由参数传递时间戳 来触发页面刷新
      const obj = { path: "/flow/definition", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    },
    handleTheme(theme) {
      // 获取目标窗口对象
      const targetWindow = document.getElementById('warmChart').contentWindow;
      targetWindow.postMessage({type: theme}, "*");
    },
  }
};
</script>
